<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>项目：{{ detail ? detail.projectName : '--' }}</h1>
          <el-tag v-if="detail.state === 1" type="success"> {{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 2">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 3" type="warning">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 4" style="color: #dee2e6" color="gray">
            {{ detail.stateStr }}
          </el-tag>
          <el-tag v-if="detail.state === 5" type="info">{{ detail.stateStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">订单号：{{ detail ? detail.orderNo : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button
          v-if="detail.state !== 4 && detail.state !== 5"
          type="info"
          plain
          style="color: #0a65f3; width: 120px"
          @click="handleUpdate(detail.id)"
        >
          编辑
        </el-button>
        <el-button
          v-if="detail.state === 2 && detail.state !== (4 || 5)"
          type="info"
          plain
          style="color: #fd7900; width: 120px"
          @click="handleUpdateState(detail.id)"
        >
          暂停
        </el-button>
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 3 && detail.state !== (4 || 5)"
          @click="handleUpdateState(detail, 2)"
        >
          恢复
        </el-button>
        <el-button
          v-if="detail.state !== 4 && detail.state !== 5"
          type="info"
          plain
          style="color: #ff4949; width: 120px"
          @click="handleOver(detail.id)"
        >
          结束
        </el-button>
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item label="所属项目名称">
          {{ detail.projectName }}
        </el-descriptions-item>
        <el-descriptions-item label="归属企业">
          {{ detail.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="项目类型">
          {{ detail.projectTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="项目起止时间">
          {{ detail.projectStartDate }} 至 {{ detail.projectEndDate }}
        </el-descriptions-item>
        <el-descriptions-item label="项目地址">
          <el-descriptions :column="1" :colon="false">
            <el-descriptions-item>
              {{ detail.projectProvince }}{{ detail.projectCity }}{{ detail.projectAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <div id="baidu-map-container" style="width: 500px; height: 300px"></div>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item label="需求船舶">
          <div v-if="detail.shipNeededArray && detail.shipNeededArray.length" style="width: 500px">
            <el-table :data="detail.shipNeededArray" border style="width: 100%">
              <el-table-column prop="typeName" label="船舶类型"></el-table-column>
              <el-table-column prop="amount" label="船舶数量"></el-table-column>
            </el-table>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="订单有效时间">
          {{ detail.startDate }} 至 {{ detail.endDate }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ detail.contacts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系手机号">
          {{ detail.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ detail.remark ? detail.remark : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建方式">
          {{ detail.createTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          {{ detail.createName ? detail.createName + '(' + detail.createPhone + ')' : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="更新人">
          {{ detail.updateName ? detail.updateName + '(' + detail.updatePhone + ')' : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ detail.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { getOrderProjectDetail, setOrderState } from '@/api/orders/orderProject';

export default {
  data() {
    return {
      detail: {
        id: null, // id
        orderNo: '', // 订单号
        projectName: '', // 项目名称
        projectType: null, // 项目类型
        projectTypeStr: '', // 项目类型名称
        projectStartDate: '', // 项目开始时间
        projectEndDate: '', // 项目结束时间
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectAddress: '', // 项目地址
        projectLongitude: '', // 项目经度
        projectLatitude: '', // 项目纬度
        contacts: '', // 联系人
        contactPhone: '', // 联系手机号
        createType: null, // 创建方式
        createTypeStr: '', // 创建方式名称
        createName: '', // 创建人
        createPhone: '', // 创建人手机号
        createTime: '', // 创建时间
        updateName: '', // 更新人
        updatePhone: '', // 更新人手机号
        updateTime: '', // 更新时间
        shipNeededArray: [], // 需求船舶
        startDate: '', // 订单开始时间
        endDate: '', // 订单结束时间
        remark: '', // 备注
        state: null, // 状态
        stateStr: '', // 状态名称
      },
    };
  },
  mounted() {
    this.getOrderProjectDetail();
  },
  methods: {
    // 获取船舶详情
    getOrderProjectDetail() {
      getOrderProjectDetail({ id: this.$route.query.id }).then((res) => {
        this.detail = res.data;
        this.initBaiduMap();
      });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'SaveOrderProject', query: { id: id } });
    },
    /**
     * 暂停
     * @param id
     */
    handleUpdateState(id) {
      this.$confirm('确定将订单暂停？暂停后订单将不展示', '暂停', {
        confirmButtonText: '暂停',
      }).then(() => {
        setOrderState({ ids: id, state: '3' }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getOrderProjectDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    /**
     * 结束
     * @param id
     */
    handleOver(id) {
      this.$confirm('确定当前订单已结束？切换结束后无法恢复', '结束', {
        confirmButtonText: '结束',
      }).then(() => {
        setOrderState({ ids: id, state: '4' }).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getOrderProjectDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    // 初始化百度地图
    initBaiduMap() {
      this.$nextTick(() => {
        /** 初始化地图Start */
        // eslint-disable-next-line no-undef
        var map = new BMap.Map('baidu-map-container'); // 创建地图实例
        // eslint-disable-next-line no-undef
        var point = new BMap.Point(this.detail.projectLongitude, this.detail.projectLatitude); // 设置中心点坐标
        map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.clearOverlays(); // 移除地图上的标注
        // eslint-disable-next-line no-undef
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        /** 初始化地图End */
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
